<template>
  <button @click="changeOne">1、watch监听ref声明的基本数据类型的响应式变量</button>
  <hr>
  <button @click="changeTwo">2、watch监听ref声明的引用数据类型的响应式变量。如果需要监听深层次的变量，则需要手动开启深度监视。</button>
  <hr>
  <button @click="changeThree">3、watch监听reactive声明的引用数据类型的响应式变量。默认就开启了深度监视，且不可以手动关闭。
    如果通过Object.assign的方式更新该引用类型的变量，则通过回调函数传回的newValue与oldValue都指向同一个变量(地址值相同)。
    watch函数还可以添加是否开启深度监视、是否开启立即执行等配置选项</button>
  <hr>
  <button @click="changeFour">4、watch监听ref、reactive声明的引用数据类型中的属性。当属性的数据类型为基本数据类型时，必须将该属性写成getter函数形式。
    当属性的数据类型为引用数据类型时，既可以直接监视，也可以写成函数形式。不过最好写成函数形式。若还需要进一步监视引用数据类型属性中的成员变量，则开启深度监视即可。</button>
    <hr>
  <button @click="changeFive">5、watch还可以监听ref、reactive及getter函数构成的数组。</button>
</template>
<script setup>
/**
 * watch可以监听以下四种源：ref声明的响应式变量、reactive声明的响应式变量、具有返回值的getter函数以及以上类型构成的数组
    1、watch监听ref声明的基本数据类型的响应式变量。
    2、watch监听ref声明的引用数据类型的响应式变量。如果需要监听深层次的变量，则需要手动开启深度监视。
    3、watch监听reactive声明的引用数据类型的响应式变量。默认就开启了深度监视，且不可以手动关闭。
      如果通过Object.assign的方式更新该引用类型的变量，则通过回调函数传回的newValue与oldValue都指向同一个变量(地址值相同)。
      watch函数还可以添加是否开启深度监视、是否开启立即执行等配置选项。
    4、watch监听ref、reactive声明的引用数据类型中的属性。当属性的数据类型为基本数据类型时，必须将该属性写成getter函数形式。
      当属性的数据类型为引用数据类型时，既可以直接监视，也可以写成函数形式。不过最好写成函数形式。若还需要进一步监视引用数据类型属性中的成员变量，则开启深度监视即可。
    5、watch还可以监听ref、reactive及getter函数构成的数组。
 */
import { reactive, ref, watch } from 'vue';
/////////////第一种情况
let one = ref('Hello')
function changeOne() {
  one.value = "你好"
}
watch(one, (val, oldVal) => {
  console.log(val, oldVal)
})
//////////////第二种情况
let two = ref({
  username: 'zhangsan',
  age: 20
})
// function changeTwo() {
//   two.value = {
//     username: 'lisi',
//     age: 20
//   }
// }
function changeTwo() {
  two.value.username = "lisi"
}
watch(two, (val, oldVal) => {
  console.log(val, oldVal)
}, 
{
  deep:true
})
////////////////第三种情况
let three = reactive({
  username: 'zhangsan',
  age: 20
})
// function changeThree() {
//   three.username = "lisi"
// }
function changeThree() {
  Object.assign(three, { username: 'lisi', age: 20 })
}
watch(three, (val, oldVal) => {
  console.log(val, oldVal)
})
////////////////第四种情况
let four = reactive({
  username: 'zhangsan',
  age: 20
})
function changeFour() {
  four.username = "lisi"
}
// watch(four.username, (val, oldVal) => {
//   console.log(val, oldVal)
// })
watch(() => { return four.username }, (val, oldVal) => {
  console.log(val, oldVal)
})
////////////////第五种情况

let five = ref('zhangsan')
let six = reactive({
  name: 'wangwu',
  age: 20
})

function changeFive() {
  five.value = "lisi"
  six.name = "zhaoliu"
}
watch([five, ()=>{return six.name}], (val, oldVal) => {
  console.log(val, oldVal)
})
</script>

<style scoped>
div {
  width: 200px;
  height: 200px;
}

hr {
  margin-top: 10px;
  margin-bottom: 10px;
}

[v-cloak] {
  background-color: brown;
}
</style>
